<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Get Started - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Get Started - Pure"><meta data-react-helmet="true" name="description" content="Start your next web project with Pure."><meta data-react-helmet="true" property="og:description" content="Start your next web project with Pure."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/3.0a320f10.js" as="script">

<link rel="preload" href="/ccca3e38.d47dd84d.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="get started"><div class="header"><h1>Get Started</h1><h2>Start your next web project with Pure.</h2></div><div class="content"><h2 id="add-pure-to-your-page" class="content-subhead">Add Pure to Your Page<a href="#add-pure-to-your-page" class="content-link" title="Heading anchor"></a></h2><p>You can add Pure to your page via the <b>free unpkg CDN</b>. Just add the following <code>&lt;link&gt;</code> element into your page&#x27;s <code>&lt;head&gt;</code>, before your project&#x27;s stylesheets.</p></div><div class="is-code-full"><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span><span style="color:#000080;font-weight:normal">&lt;</span><span style="color:#000080;font-weight:normal">link</span><span style="color:#000080;font-weight:normal"> </span><span class="hljs-attr" style="color:#000080;font-weight:normal">rel</span><span style="color:#000080;font-weight:normal">=</span><span style="color:#219161;font-weight:normal">&quot;stylesheet&quot;</span><span style="color:#000080;font-weight:normal"> </span><span class="hljs-attr" style="color:#000080;font-weight:normal">href</span><span style="color:#000080;font-weight:normal">=</span><span style="color:#219161;font-weight:normal">&quot;https://unpkg.com/purecss@2.0.5/build/pure-min.css&quot;</span><span style="color:#000080;font-weight:normal"> </span><span class="hljs-attr" style="color:#000080;font-weight:normal">integrity</span><span style="color:#000080;font-weight:normal">=</span><span style="color:#219161;font-weight:normal">&quot;sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd&quot;</span><span style="color:#000080;font-weight:normal"> </span><span class="hljs-attr" style="color:#000080;font-weight:normal">crossorigin</span><span style="color:#000080;font-weight:normal">=</span><span style="color:#219161;font-weight:normal">&quot;anonymous&quot;</span><span style="color:#000080;font-weight:normal">&gt;</span></span></code></pre></div></div><div class="content"><aside><p>Alternatively, <a href="/customize/">check out other CDNs</a> that host Pure or you can install Pure via a <a href="/tools/">package manager</a>.</p></aside><h2 id="add-the-viewport-meta-element" class="content-subhead">Add the Viewport Meta Element<a href="#add-the-viewport-meta-element" class="content-link" title="Heading anchor"></a></h2><p>The viewport <code>meta</code> element lets you control the the width and scale of the viewport on mobile browsers. Since you&#x27;re building a responsive website, you want the width to be equal to the device&#x27;s native width. Add this into your page&#x27;s <code>&lt;head&gt;</code>.</p></div><div class="is-code-full"><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span><span style="color:#000080;font-weight:normal">&lt;</span><span style="color:#000080;font-weight:normal">meta</span><span style="color:#000080;font-weight:normal"> </span><span class="hljs-attr" style="color:#000080;font-weight:normal">name</span><span style="color:#000080;font-weight:normal">=</span><span style="color:#219161;font-weight:normal">&quot;viewport&quot;</span><span style="color:#000080;font-weight:normal"> </span><span class="hljs-attr" style="color:#000080;font-weight:normal">content</span><span style="color:#000080;font-weight:normal">=</span><span style="color:#219161;font-weight:normal">&quot;width=device-width, initial-scale=1&quot;</span><span style="color:#000080;font-weight:normal">&gt;</span></span></code></pre></div></div><div class="content"><h2 id="understand-pure-grids" class="content-subhead">Understand Pure Grids<a href="#understand-pure-grids" class="content-link" title="Heading anchor"></a></h2><p>Pure&#x27;s grid system is very simple. You create a row by using the <code>.pure-g</code> class, and create columns within that row by using the <code>pure-u-*</code> classes.</p><p>Here&#x27;s a grid with three columns:</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-g&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">p</span>&gt;</span>Thirds<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">p</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">p</span>&gt;</span>Thirds<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">p</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">p</span>&gt;</span>Thirds<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">p</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><div class="grids-example"><div class="pure-g"><div class="pure-u-1-3"><p>Thirds</p></div><div class="pure-u-1-3"><p>Thirds</p></div><div class="pure-u-1-3"><p>Thirds</p></div></div></div><div class="content"><h2 id="responsive-grids" class="content-subhead">Responsive Grids<a href="#responsive-grids" class="content-link" title="Heading anchor"></a></h2><p>Pure&#x27;s grid system is also <b>mobile-first</b> and <b>responsive</b>, and you&#x27;re able to customize the grid by specifying CSS Media Query breakpoints and grid classnames.</p><p>You&#x27;ll need to <em>also</em> include Pure&#x27;s <code>grids-responsive.css</code> onto your page:</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">link</span> <span class="hljs-attr">rel</span>=<span style="color:#219161">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css&quot;</span>&gt;</span></code></pre></div></div><p>Here&#x27;s the default responsive breakpoints included in <code>grids-responsive.css</code>:</p><div class="table-responsive"><table class="mq-table pure-table-bordered pure-table"><thead><tr><th class="highlight">Key</th><th class="highlight">CSS Media Query</th><th>Applies</th><th>Classname</th></tr></thead><tbody><tr><td class="highlight"><i>None</i></td><td class="highlight"><i>None</i></td><td><i>Always</i></td><td><code>.pure-u-*</code></td></tr><tr><td class="highlight"><b><code>sm</code></b></td><td class="mq-table-mq highlight"><code>@media screen and (min-width: 35.5em)</code></td><td>≥ <b>568px</b></td><td><code>.pure-u-<b>sm</b>-*</code></td></tr><tr><td class="highlight"><b><code>md</code></b></td><td class="mq-table-mq highlight"><code>@media screen and (min-width: 48em)</code></td><td>≥ <b>768px</b></td><td><code>.pure-u-<b>md</b>-*</code></td></tr><tr><td class="highlight"><b><code>lg</code></b></td><td class="mq-table-mq highlight"><code>@media screen and (min-width: 64em)</code></td><td>≥ <b>1024px</b></td><td><code>.pure-u-<b>lg</b>-*</code></td></tr><tr><td class="highlight"><b><code>xl</code></b></td><td class="mq-table-mq highlight"><code>@media screen and (min-width: 80em)</code></td><td>≥ <b>1280px</b></td><td><code>.pure-u-<b>xl</b>-*</code></td></tr></tbody></table></div><p>Here&#x27;s an example of what you&#x27;d be able to do. <i>Try resizing your screen to see how the grid responds.</i></p></div><div class="grids-example"><div class="pure-g"><div class="pure-u-1">.pure-u-1</div><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">.pure-u-1<br>.pure-u-md-1-2<br>.pure-u-lg-1-4</div><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">.pure-u-1<br>.pure-u-md-1-2<br>.pure-u-lg-1-4</div><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">.pure-u-1<br>.pure-u-md-1-2<br>.pure-u-lg-1-4</div><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">.pure-u-1<br>.pure-u-md-1-2<br>.pure-u-lg-1-4</div><div class="pure-u-1 pure-u-md-3-4">.pure-u-1<br>.pure-u-md-3-4</div><div class="pure-u-1 pure-u-md-1-4">.pure-u-1<br>.pure-u-md-1-4</div></div></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/3.0a320f10.js"></script>

<script src="/ccca3e38.d47dd84d.js"></script>


</body>
</html>